Un bouton d'action flottant est un bouton circulaire qui déclenche dans l'UI de votre application. Cette page vous montre comment ajouter le bouton d'action flottant à votre mise en page, personnaliser une partie de son apparence et répondre aux pressions sur les boutons.
Pour en savoir plus sur la conception d'un bouton d'action flottant dans votre application conformément aux consignes Material Design, consultez également l'article Boutons: bouton d'action flottant.
Ajouter le bouton d'action flottant à votre mise en page
Le code suivant montre comment
FloatingActionButton
doit
dans votre fichier de mise en page:
<com.google.android.material.floatingactionbutton.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="end|bottom" android:src="@drawable/ic_my_icon" android:contentDescription="@string/submit" android:layout_margin="16dp" />
Par défaut, le bouton d'action flottant est coloré par l'attribut colorAccent
,
que vous pouvez personnaliser
avec la palette de couleurs du thème.
Vous pouvez configurer d'autres propriétés du bouton d'action flottant à l'aide d'un fichier XML ou les méthodes correspondantes, telles que:
- La taille du bouton d'action flottant, à l'aide de l'attribut
app:fabSize
ou dusetSize()
. - Couleur d'ondulation du bouton d'action flottant, à l'aide de l'attribut
app:rippleColor
ou dusetRippleColor()
. - L'icône du bouton d'action flottant, à l'aide de l'attribut
android:src
ou dusetImageDrawable()
.
Répondre aux boutons
Vous pouvez ensuite appliquer un View.OnClickListener
pour gérer le bouton d'action flottant
tapotements. Par exemple, le code suivant affiche un Snackbar
lorsque l'utilisateur appuie sur le bouton d'action flottant:
Kotlin
val fab: View = findViewById(R.id.fab) fab.setOnClickListener { view -> Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG) .setAction("Action", null) .show() }
Java
FloatingActionButton fab = findViewById(R.id.fab); fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG) .setAction("Action", null).show(); } });
Pour en savoir plus sur les fonctionnalités du bouton d'action flottant, consultez la documentation de référence de l'API pour
le FloatingActionButton
.